<template>
  <div>
    <tree-select
      ref="currentRowTable"
      v-model="treeSelected"
      style="width: 300px"
      check-strictly
      :expand-all="true"
      :load-data="loadData"
      @on-change="handleTreeSelectChange"
      @on-toggle-expand="handleTreeSelectExpand"
      @on-check-change="handleTreeSelectCheckChange"
      @on-select-change="handleTreeSelectClick"
      :data="treeData"
    ></tree-select>
    <!-- <Button @click="changeTreeSelectData">更新选中数据</Button>
    <Button @click="changeTreeData">更新树数据</Button> -->
    <Button
      type="primary"
      icon="ios-search"
      @click="changeTreeData"
      style="margin: 0 15px 0 15px"
      >搜索</Button
    >
    <Button
      type="primary"
      icon="ios-trash-outline"
      v-show="isShow"
      @click="clearSelectAll"
      >清空</Button
    >
    <Button type="primary" icon="ios-add-circle-outline" @click="isShowdetail"
      >添加用户</Button
    >
    <Button class="Background" v-show="isShowadd" @click="clearSelectAll"
      >清空</Button
    >
    <Modal
      v-model="isShowDetail"
      title="添加用户"
      @on-ok="determine"
      @on-cancel="cancel"
      size="large"
    >
      <Layout>
        <div class="content">
          <span class="red">*</span>
          <div class="title">邮箱</div>
          <span>
            <Input
              prefix="md-mail"
              style="width: 300px"
              placeholder="Enter something..."
          /></span>
        </div>
        <div class="content">
          <i class="red">*</i>
          <div class="title">密码</div>
          <span>
            <Input
              prefix="ios-lock"
              class="inp"
              style="width: 300px"
              placeholder="输入密码"
          /></span>
        </div>
        <div class="content">
          <div class="title">昵称</div>
          <span
            ><Input
              prefix="ios-contact"
              style="width: 300px"
              placeholder="Enter something..."
          /></span>
        </div>
        <div class="content">
          <div class="title">积分</div>
          <span
            ><RadioGroup>
              <Radio label="0">
                <span>正常</span>
              </Radio>
              <Radio label="1">
                <span>禁言</span>
              </Radio>
              <Radio label="2">
                <span>账号禁用</span>
              </Radio>
            </RadioGroup></span
          >
        </div>
        <div class="content">
          <span class="red">*</span>
          <div class="title">所在城市</div>
          <Input
            prefix="ios-pin"
            style="width: 300px"
            placeholder="Enter something..."
          />
        </div>
        <div class="content">
          <div class="title">点赞数量</div>
          <span>
            <Input style="width: 380px" />
          </span>
        </div>
        <div class="content">
          <div class="title">是否VIP</div>
          <span
            ><RadioGroup>
              <Radio label="0">
                <span>是</span>
              </Radio>
              <Radio label="1">
                <span>否</span>
              </Radio>
            </RadioGroup></span
          >
        </div>
        <div class="content">
          <div class="title">用户角色</div>
          <span
            ><RadioGroup>
              <Radio label="0">
                <span>是</span>
              </Radio>
              <Radio label="1">
                <span>否</span>
              </Radio>
            </RadioGroup></span
          >
        </div>
        <div class="content">
          <div class="title">性别</div>
          <span
            ><RadioGroup>
              <Radio label="1">
                <span>是</span>
              </Radio>
              <Radio label="0">
                <span>否</span>
              </Radio>
            </RadioGroup></span
          >
        </div>
        <div class="content">
          <span class="red">*</span>
          <div class="title">手机</div>
          <span
            ><Input
              style="width: 380px"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
          /></span>
        </div>
        <div class="content">
          <div class="title">是否禁用</div>
          <span
            ><RadioGroup>
              <Radio label="1">
                <span>是</span>
              </Radio>
              <Radio label="0">
                <span>否</span>
              </Radio>
            </RadioGroup></span
          >
        </div>
        <div class="content">
          <span class="red">*</span>
          <div class="title">个性签名</div>
          <span
            ><Input
              style="width: 380px"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
          /></span>
        </div>
      </Layout>
    </Modal>
  </div>
</template>

<script>
import TreeSelect from '_c/tree-select'
import { newTreeData } from '@/mock/data/tree-select'
import { getTreeSelectData } from '@/api/data'
export default {
  name: 'tree_select_page',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    isShowadd: {
      type: Boolean,
      default: false
    },
  },
  components: {
    TreeSelect
  },
  data () {
    return {
      treeSelected: [112, 113],
      treeData: [],
      isShowDetail: false
    }
  },
  mounted () {
    getTreeSelectData().then(res => {
      const { data } = res
      this.treeData = data
    })
  },
  methods: {
    determine () { },
    cancel () { },
    isShowdetail () {
      this.isShowDetail = !this.isShowDetail
    },
    clearSelectAll () { },
    changeTreeSelectData () {
      this.treeSelected = [111, 114]
    },
    changeTreeData () {
      this.treeData = newTreeData
      // this.treeSelected = [];
    },
    handleTreeSelectChange (list) {
      console.log('=-========', list);
    },
    handleTreeSelectExpand (item) {
      // console.log('toggle expand', item);
    },
    handleTreeSelectCheckChange (selectedArray, item) {
      // console.log(selectedArray, item);
    },
    handleTreeSelectClick (selectArray, item) {
      // console.log(selectArray, item);
    },
    loadData (item, callback) {
      setTimeout(() => {
        let data = [
          {
            id: 111,
            title: '1-1-1'
          },
          {
            id: 112,
            title: '1-1-2'
          },
          {
            id: 113,
            title: '1-1-3'
          },
          {
            id: 114,
            title: '1-1-4'
          }
        ]
        callback(data)
      }, 1000)
    }
  }
}
</script>

<style lang='scss' scope>
.total {
  display: flex;
  float: right;
}
.ivu-icon {
  cursor: pointer;
}
.table {
  margin-bottom: 10px;
  margin-top: 10px;
}
.search-col1 {
  width: 200px;
}

.search-btn {
  margin-left: 5px;
}
.content {
  display: flex;
  margin: 8px 0px;
}
.title {
  width: 100px;
}
.red {
  color: rgb(255, 8, 8);
}
</style>
